<template>
  <template v-if="$cfg.mobile == false">
    <div
      class="gap g8"
      style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))"
    >
      <template v-for="(item, key) in props.data">
        <template v-if="item.type == 'select'">
          <n-select
            @update:value="(value) => item.func(item, value)"
            v-model:value="val[item.value]"
            :placeholder="item.name"
            :options="item.list"
            label-field="text"
          />
        </template>
        <template v-if="item.type == 'role_ghz'">
          <n-select
            @update:value="(value) => item.func(item, value)"
            v-model:value="val[item.value]"
            filterable
            :render-label="set.select"
            :placeholder="item.name"
            :options="data.role_ghz"
          >
            <template #header>
              <n-checkbox
                :checked="data.ckbox_roleghz"
                label="显示全部角色"
                @update:checked="set.ckbox_ghz_pc"
              />
            </template>
          </n-select>
        </template>
        <template v-else-if="item.type == 'ckbox'">
          <n-select
            @update:value="(value) => item.func(item, value)"
            :placeholder="item.name"
            v-model:value="val[item.value]"
            :max-tag-count="1"
            :options="item.list"
            label-field="text"
            multiple
          />
        </template>
        <template v-else-if="item.type == 'input'">
          <template v-if="item.fjtype == 'num'">
            <n-input-number
              :placeholder="item.name"
              v-model:value="val[item.value]"
              @update:value="(value) => item.func(item, value)"
            ></n-input-number>
          </template>
          <template v-else>
            <n-input
              :placeholder="item.name"
              v-model:value="val[item.value]"
              @update:value="(value) => item.func(item, value)"
            ></n-input>
          </template>
        </template>
      </template>
    </div>
  </template>
  <template v-else>
    <van-tabs :line-height="0" class="vanmenu" @click-tab="set.clickmenu">
      <van-tab v-for="(item, key) in props.data" :title="item.value">
        <template #title>{{ item.bname }}<van-icon :name="item.icon" /></template>
      </van-tab>
    </van-tabs>
    <template v-for="(item, key) in props.data">
      <template v-if="item.type == 'role_ghz'">
        <van-popup v-model:show="data.show[item.value]" position="bottom" teleport="body">
          <div style="background-color: #eee; padding: 8px">
            <van-cell-group>
              <van-cell title="显示全部角色">
                <template #right-icon>
                  <van-checkbox
                    v-model="data.ckbox_roleghz"
                    @change="set.ckbox_ghz"
                  ></van-checkbox>
                </template>
              </van-cell>

              <van-field
                placeholder="搜索角色 如:hy 火羊"
                @update:model-value="set.uproleghz"
                v-model="data.sea_roleghz"
              />
            </van-cell-group>
          </div>
          <van-picker
            :columns="data.role_ghz"
            @cancel="data.show[item.value] = false"
            @confirm="(value) => set.picker(value, item)"
          >
            <template #option="option, i">
              <!-- 自定义选项内容 -->
              <div class="dfc g8">
                <img
                  v-if="option.icon != null"
                  style="width: 35px"
                  :src="cfg.function.ava(option.icon)"
                />{{ option.name }}
              </div>
            </template>
          </van-picker>
        </van-popup>
      </template>
      <template v-else-if="item.type == 'ckbox'">
        <van-popup
          closeable
          v-model:show="data.show[item.value]"
          position="bottom"
          teleport="body"
        >
          <div style="background-color: #eee; padding: 8px">
            <van-cell :title="item.name">
              <van-checkbox-group
                v-model="val[item.value]"
                shape="square"
                direction="horizontal"
                @change="(value) => item.func(item, value)"
              >
                <div class="gap g8">
                  <van-checkbox :name="item2.value" v-for="item2 in item.list">{{
                    item2.text
                  }}</van-checkbox>
                </div>
              </van-checkbox-group></van-cell
            >
          </div>
        </van-popup>
      </template>
      <template v-else-if="item.type == 'input'">
        <van-popup
          title="展示弹出层"
          v-model:show="data.show[item.value]"
          position="bottom"
          teleport="body"
        >
          <div style="background-color: #eee; padding: 8px" class="gap g8">
            <van-field
              v-model="val[item.value]"
              type="digit"
              :label="item.name"
              :placeholder="item.tips ?? `请输入数字`"
              @update:model-value="(value) => item.func(item, value)"
            />
            <div class="gap g8 gaplist2">
              <van-button type="primary" @click="data.show[item.value] = false"
                >确认</van-button
              >
              <van-button plain type="primary" @click="val[item.value] = undefined"
                >清除</van-button
              >
            </div>
          </div>
        </van-popup>
      </template>
      <template v-else>
        <van-popup v-model:show="data.show[item.value]" position="bottom" teleport="body">
          <van-picker
            :columns="item.list"
            @cancel="data.show[item.value] = false"
            @confirm="(value) => set.picker(value, item)"
          >
          </van-picker>
        </van-popup>
      </template>
    </template>
  </template>
</template>

<script>
import { getrole } from "@/cfg/function.js";
import { cfg } from "@/cfg/cfg.js";
import { set, template } from "lodash";

export default {
  props: {
    val: {
      type: Object,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
  },
  setup(props, { emit }) {
    const set = {
      ckbox_ghz_pc: (value) => {
        if (value == true) {
          data.role_ghz = data.role_all_ys.slice();
        } else {
          data.role_ghz = data.role_ghz_ys.slice();
        }
      },
      ckbox_ghz: (value) => {
        data.ckbox_roleghz = value;
        set.uproleghz(data.sea_roleghz || "");
      },
      uproleghz: (seatext) => {
        let ghzrole;
        if (data.ckbox_roleghz == true) {
          ghzrole = data.role_all_ys.slice();
        } else {
          ghzrole = data.role_ghz_ys.slice();
        }
        for (let index = 0; index < ghzrole.length; index++) {
          const element = ghzrole[index];
          //element不包含文字seatext
          if (!element?.label?.includes(seatext)) {
            ghzrole.splice(index, 1);
            index--;
          }
        }
        data.role_ghz = ghzrole;
      },
      clickmenu: (item) => {
        data.show[item.title] = true;
      },
      picker: (value, item) => {
        data.show[item.value] = false;
        const opt = value.selectedOptions;
        item.func(item, opt[0].value);
      },
      select: (option) => {
        return h("div", { class: "select_div" }, [
          h("img", {
            class: "select_ava",
            src: cfg.function.ava(option.icon),
          }),
          option.name,
        ]);
      },
    };
    const data = reactive({
      show: {},
      role_ghz: [
        {
          value: "off",
          label: "清除筛选,off,关闭,x",
          name: "清除筛选",
        },
      ],
      role_all: [
        {
          value: "off",
          label: "清除筛选,off,关闭,x",
          name: "清除筛选",
        },
      ],
    });
    const val = props.val;

    onMounted(async () => {
      for (let index = 0; index < props.data.length; index++) {
        const element = props.data[index].type;
        if (element == "role_ghz") {
          data.onrole = true;
        }
      }
      if (data.onrole == true) {
        await getrole();
        for (let index = 0; index < cfg.role.length; index++) {
          const d = cfg.role[index];
          data.role_all.push({
            value: d.icon,
            label: d.name + " - " + d.bname,
            text: d.name + " - " + d.bname,
            name: d.name,
            icon: d.icon,
          });
          if (!d.bantag?.includes("ghz")) {
            data.role_ghz.push({
              value: d.icon,
              label: d.name + " - " + d.bname,
              name: d.name,
              text: d.name + " - " + d.bname,
              icon: d.icon,
            });
          }
        }
        data.role_ghz_ys = data.role_ghz.slice();
        data.role_all_ys = data.role_all.slice();
      }
    });

    return {
      props,
      set,
      val,
      cfg,
      data,
    };
  },
};
</script>
